<template>
    <Modal
        :draggable="!$config.mask"
        :mask="$config.mask"
        :mask-closable="!$config.mask"
        :value="value"
        @on-visible-change="visibleChange"
        width="800"
        class="pandx"
    >
      <p slot="header">
        登录记录
      </p>
      <template v-for="item in loginAttempts">
        <Card style="margin-bottom:10px;">

          <Row :gutter="10">
            <Col span="6" class="key">IP地址：</Col>
            <Col class="value" span="18">{{ item.clientIpAddress }}</Col>
                </Row>
                <Row :gutter="10">
                    <Col span="6" class="key">浏览器：</Col>
                  <Col class="value" span="18">{{ item.browserInfo }}</Col>
                </Row>
                <Row :gutter="10">
                    <Col span="6" class="key">登录结果：</Col>
                  <Col class="value" span="18">{{ item.result }}</Col>
                </Row>
                <Row :gutter="10">
                    <Col span="6" class="key">登录时间：</Col>
                  <Col class="value" span="18">{{ item.creationTime }}</Col>
                </Row>
            </Card>
        </template>
        <div slot="footer">
            <Button @click="cancel" icon="md-close">关闭</Button>
        </div>
    </Modal>
</template>

<script lang="ts">
import {Component, Vue, Prop, Watch, Emit} from 'vue-property-decorator';
import AbpBase from '@/lib/abpbase';
import Util from '@/lib/util';

@Component({
  components: {},
})
export default class LoginAttempt extends AbpBase {
  name: string = 'LoginAttempt';

  @Prop({type: Boolean, default: false}) value: boolean;

  loginAttempts: any[] = [];

  cancel() {
    this.$emit('input', false);
  }

  visibleChange(value: boolean) {
    if (!value) {
      this.$emit('input', value);
    } else {
      this.loginAttempts = this.$store.state.app.loginAttempts;
      this.loginAttempts.forEach((item) => {
        switch (item.result) {
          case 'Success':
            item.result = '成功';
            break;
          case 'InvalidUserNameOrEmailAddress':
            item.result = '不正确的用户名或Email地址';
            break;
          case 'InvalidPassword':
            item.result = '不正确的密码';
            break;
          case 'UserIsNotActive':
            item.result = '用户未激活';
            break;
          case 'InvalidTenancyName':
            item.result = '不正确的租户名';
            break;
          case 'TenantIsNotActive':
            item.result = '租户未激活';
            break;
          case 'UserEmailIsNotConfirmed':
            item.result = 'Email地址未确认';
            break;
          case 'UnknownExternalLogin':
            item.result = '未知的第三方登录';
            break;
          case 'LockedOut':
            item.result = '用户被锁定';
            break;
          case 'UserPhoneNumberIsNotConfirmed':
            item.result = '电话号码未确认';
            break;
        }
        item.creationTime = Util.getTime(item.creationTime);
      });
    }
  }
}
</script>

<style lang="less" scoped>
.pandx::v-deep {
    .ivu-modal-body {
        height: 600px;
        overflow-y: auto;
    }

    .ivu-modal-body::-webkit-scrollbar {
        width: 4px;
        background-color: #fff;
    }

    .ivu-modal-body::-webkit-scrollbar-thumb {
        border-radius: 2px;
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
        background-color: #e8eaec;
    }

    .ivu-modal-body::-webkit-scrollbar-track {
        -webkit-box-shadow: inset 0 0 1px rgba(0, 0, 0, .3);
        border-radius: 2px;
        background-color: #fff;
    }
}
</style>
